import React, { Component } from 'react'
import { connect } from 'dva';
import { Table, Radio } from 'antd';
import Form from './FloorForm'

export interface Props {
  dispatch?: Function,
  onChanges: Function,
  children?: React.ReactNode,
  loading?: boolean,
  floorList?: {
    data: Array<any>,
    dataCnt: number
  },
  selected: Array<string>;
  selectedKey: Array<string>;
  buttons?: Array<any>,
  dict?: object,
  isReset: any
}

const ONE_PAGE_SIZE = 10;

@connect(({ task_month, loading }) => ({
  floorList: task_month.floorList || {},
  dict: task_month.dict,
  loading: loading.effects['task_month/queryFloorPage']
}))
class Floor extends Component<Props, any> {
  state = {
    current: 1,
    selectedRowKeys: this.props.selectedKey,
    targetId: '',
    name: ''
  };
  
  constructor(props) {
    super(props);
    this.initCurrent = this.initCurrent.bind(this);
  }

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch } = this.props;
    dispatch({
      type: 'task_month/queryFloorPage',
      payload: {
        pageNum: offset,
        pageSize: size,
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  onSelectChange = (selectedRowKeys, rowData) => {
    this.setState({
      selectedRowKeys,
      rowData
    }, () => {
      this.props.onChanges(selectedRowKeys.map(it => {
        const ans = it.split('%%');
        return { targetId: ans[0], groupId: ans[1], name: ans[2], groupName: ans[3], type: ans[4] }
      }));
    })
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'task_month/initFloorCond' })
  }

  render() {
    const { buttons, floorList = { data: [], dataCnt: 0 }, selected } = this.props;
    const btnList = {};
    if (Array.isArray(buttons)) {
      buttons.forEach(item => {
        btnList[item.name] = item.name
      });
    }

    const { data = [], dataCnt } = floorList;

    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
      // floorId%%buildId%%floorName%%buildName%%3
      // targetId%%groupId%%targetName%%groupName%%3
      key: `${item.id}%%${item.buildId}%%${item.floorName}%%${item.buildName}%%3`,
      id: item.id, // floorId(targetId)
      floorName: item.floorName,
      buildName: item.buildName,
    })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current }, () =>  this.queryData(current));
      },
    };

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      getCheckboxProps: record => ({
        type: Radio,
        disabled: selected.includes(record.id), // targetId floorId
      }),
      onChange: this.onSelectChange
    };

    const columns = [{
      title: '建筑名称',
      dataIndex: 'buildName'
    }, {
      title: '楼层名称',
      dataIndex: 'floorName'
    }];

    return (
      <div>
        <Form current={this.state.current} initCurrent={this.initCurrent} new={!!btnList['新增']} />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
          rowSelection={rowSelection}
        />
      </div>
    );
  }
}

export default Floor;
